今天是禮拜六，發現昨天的我直接睡死在沙發上，發現真的有夠想睡的~
直接不省人事耶~
今天來看看相關的舉例，來做個時間問候語吧!
前情提要&補充說明
Date()
用於處理日期和時間。
用法
const now = new Date();
console.log(now); // 輸出當前日期和時間，例如: 2024-09-06T10:23:45.123Z
getHours()
const now = new Date(); // 獲取當前的日期和時間
const hours = now.getHours(); // 獲取當前小時數（0-23）
console.log(hours); // 輸出:23(當前的小時時鐘)
先來看看html的部分喔~
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>時間問候語</title>
</head>
<body>
<h1 id="greeting">你好!</h1>//先設立一個id為greeting的h1標籤
</body>
</html>
接下來看一下css的部分~
#greeting{
color:#grey;//字體灰色
background-image: url("https://hips.hearstapps.com/hmg-prod/images/6-1-64e47d33839d1.jpg");//使用檀先生的圖片
width:60%;
height:100vh;
background-size: cover;//背景圖片覆蓋整個容器
}
最後看一下js的部分喔
// 獲取當前時間
const now = new Date();
const hours = now.getHours(); // 獲取小時部分（24小時）
// 抓取問候語id(使用的是前個文章的getElementById)
const greetingElement = document.getElementById('greeting');
// 根據時間設定問候語，使用if跟else
if (hours >= 0 && hours < 12) {
greetingElement.textContent = '早安，親愛的！';
} else if (hours >= 12 && hours < 18) {
greetingElement.textContent = '下午了，要不要一起吃蛋糕呀！';
} else {
greetingElement.textContent = '你不睡覺，我會心疼的！';
}
可以看一下最終codepen喔~
https://codepen.io/JoyceChou914/pen/wvLROzO
我是超級新手，若有任何建議或是錯誤的部分，歡迎底下留言唷thanks
我們下篇文章見掰掰~
對自己多用點心，日益努力，而後風生水起。盡情玩耍，盡情學習，盡情熱愛，盡情討厭，在需要的時候釋放善意，在必要的時候展現強硬，把這不得不過完的一生，變成值得慶賀的一生。
iThome鐵人賽
看影片追技術